<template>
    <div class="third-step">
        <el-form :model="ruleForm3" :rules="rules3" ref="ruleForm3" label-width="160px" class="demo-ruleForm">
            <el-form-item label="跟投金额：" prop="money1">
                <el-input :disabled="true" v-model="ruleForm3.money1" class="w-200"></el-input>
                元
                <span class="tip ml20">注：由总投入金额计算得出</span>
            </el-form-item>
            <el-form-item label="募集跟投分配占比：" prop="scale">
                <el-input :disabled="true" v-model="ruleForm3.scale" class="w-200"></el-input>
                %
            </el-form-item>
            <el-form-item label="募集跟投分配金额：" prop="money2">
                <el-input :disabled="true" v-model="ruleForm3.money2" class="w-200"></el-input>
                元
            </el-form-item>
            <el-form-item label="跟投份数：" prop="count">
                <el-input v-model="ruleForm3.count" class="w-200"></el-input>
            </el-form-item>
            <div>其中：</div>
            <el-form-item label="最小跟投份数：">
                <el-input v-model="ruleForm3.minCount" :disabled="true" class="w-200"></el-input>
            </el-form-item>
            <el-form-item label="最大跟投份数：" prop="maxCount">
                <el-input v-model="ruleForm3.maxCount" class="w-200"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "thirdStep",
        props: ['thirdUse','renderData3'],
        watch: {
            thirdUse: {
                handler(newValue) {
                    this.ruleForm3.money1 = newValue.money.toFixed(2);
                    this.ruleForm3.money2 = (newValue.money * newValue.scale / 100).toFixed(2);
                    this.ruleForm3.scale = newValue.scale;
                },
                deep: true,
                immediate: false
            },
            renderData3(){
                if(this.renderData3.maxCount){
                    this.ruleForm3.count = this.renderData3.count;
                    this.ruleForm3.maxCount = this.renderData3.maxCount;
                    this.ruleForm3.minCount = this.renderData3.minCount;
                }
            }

        },
        data() {
            let countValidate = (rule, value, callback) => {
                let reg = /^\d{1,5}$/g;
                if (!reg.test(+value) || +value === 0) {
                    callback(new Error('输入格式不正确，请输入正整数，长度最大值5位数!'));
                } else {
                    callback();
                }
            };
            let minCountValidate = (rule, value, callback) => {
                if (!this.ruleForm3.count) {
                    callback(new Error('请先输入跟投份数！'));
                } else if (+this.ruleForm3.minCount > +this.ruleForm3.count) {
                    callback(new Error('最小跟投份数不能大于跟投份数'));
                } else {
                    callback();
                }
            };
            let maxCountValidate = (rule, value, callback) => {
                if (!this.ruleForm3.count) {
                    callback(new Error('请先输入跟投份数！'));
                } else if (+this.ruleForm3.maxCount > +this.ruleForm3.count) {
                    callback(new Error('最大跟投份数不能大于跟投份数'));
                } else if (+this.ruleForm3.maxCount < +this.ruleForm3.minCount) {
                    callback(new Error('最大跟投份数不能小于最小跟投份数'));
                } else {
                    callback();
                }
            };


            return {
                ruleForm3: {
                    money1: "",
                    scale: "",
                    money2: "",
                    count: "",
                    minCount: 1,
                    maxCount: ""
                },
                rules3: {
                    money1: [
                        {required: true, message: '请输入跟投金额', trigger: 'blur'},
                    ],
                    scale: [
                        {required: true, message: '募集跟投分配占比', trigger: 'blur'},
                    ],
                    money2: [
                        {required: true, message: '募集跟投分配金额', trigger: 'blur'},
                    ],
                    count: [
                        {required: true, message: '请输入跟投份数', trigger: 'blur'},
                        {validator: countValidate, trigger: 'blur'}
                    ],
                    minCount: [
                        {required: true, message: '请输入最小跟投份数', trigger: 'blur'},
                        {validator: countValidate, trigger: 'blur'},
                        {validator: minCountValidate, trigger: 'blur'},
                    ],
                    maxCount: [
                        {required: true, message: '请输入最大跟投份数', trigger: 'blur'},
                        {validator: countValidate, trigger: 'blur'},
                        {validator: maxCountValidate, trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
            isCanGoNextStep() {
                return new Promise((resolve) => {
                    this.$refs.ruleForm3.validate((valid) => {
                        resolve(valid)
                    })
                })
            }
        }
    }
</script>

<style lang="stylus">
    .third-step {
        padding-top: 40px;
        .tip {
            color: #f00;
        }
    }
</style>
